<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="../js/babel.js"></script>
</head>

<body>
  <div id="root"></div>
</body>

</html>


<script type="text/babel">
  /**
   * 状态提升 -> 就是用户对子组件进行操作 子组件不改变自己的状态 通过自己的props 把这个操作改变的数据传递给父组件 改变父组件的状态 
   * 从而改变受父组件控制的所有子组件的状态
   */

  /**
   * 这里我们实现一个美元 和 人民币转换的案列 
   * 子组件为fieldset 的输入框 父组件控制着输入框
   */

  class MoneyInput extends React.Component {
    constructor(props) {
      super(props)
      this.state = {}

      this.handleChange = this.handleChange.bind(this)
    }

    handleChange(event) {
      this.props.moneyChange(event.target.value)
    }

    render() {
      const money = this.props.money
      const currencyName = this.props.type == 'd' ? '美元' : '人民币'
      return (
        <fieldset>
          <legend>货币名称：{currencyName}</legend>
          <input type="number" value={money} onChange={this.handleChange} />
        </fieldset>
      )
    }
  }

  class ControlStatus extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        dollar: 0,
        yuan: 0
      }

      this.handleYuanChange = this.handleYuanChange.bind(this)
      this.handleDollarChange = this.handleDollarChange.bind(this)
    }

    handleDollarChange(value) {
      this.setState({
        dollar: value,
        yuan: value == '' ? '' : parseFloat(value) * 6.3
      })
    }

    handleYuanChange(value) {
      this.setState({
        yuan: value,
        dollar: value == '' ? '' : (parseFloat(value) / 6.3).toFixed(2)
      })
    }

    render() {
      return (
        <form>
          <MoneyInput type='d' money={this.state.dollar} moneyChange={this.handleDollarChange} />
          <MoneyInput type='y' money={this.state.yuan} moneyChange={this.handleYuanChange} />
        </form>
      )
    }
  }

  /**
   * 这里我们还可以实现一下官方给的 摄氏度与华氏度 之间的转换
   * 阅读了官方给的案列 我发现他的数据给的有些复杂 就是冗余 包括函数的封装 我看的稍微有些乱
   * 他这个案列无非是想要描述 状态提升 子组件通过自己的props改变父组件中的值 进而去改变父组件下的所有子组件的值 
   */

  ReactDOM.render(<ControlStatus type='d' money={10} />, document.getElementById('root'))

</script>